<template>
    <div v-bind:class="{mgb2:mgClass}" class="mui-content orderDetail mui-scroll-wrapper">
        <div class="mui-scroll">
            <!--订单状态-->
            <ul class="mui-table-view orderStatus mgb1 mgt1">
                <li class="mui-table-view-cell">
                    <p class="text1 unconfirmed">{{order.orderStatus | orderStatusBy}}</p>
                    <p class="text3" v-if="order.orderStatus==0">保养订单已提交，请等待平台派单</p>
                    <p class="text3" v-if="order.orderStatus==1">服务中心已收到保养订单，将在2个工作日内日与您联系确认保养。请保持联系电话畅通。</p>
                    <p class="text3" v-if="order.orderStatus==2">技师已到现场，现在正在维养您的爱车。若在过程中有疑问，请与技师及时沟通确认。</p>
                    <p class="text3" v-if="order.orderStatus==40">感谢您使用爱特车服，欢迎下次光临！</p>
                </li>
            </ul>
            <!--车辆信息-->
            <div class="slwy-panel orderCarInfo">
                <div class="panel-content">
                    <div class="panel-title">车辆信息</div>
                    <ul class="mui-table-view no-border">
                        <li class="mui-table-view-cell text3">
                            <p class="col-8  text3">{{order.carXh}}</p>
                            <p class="col-4 mui-text-right  text3">{{order.carXslc}}KM</p>
                            <span class="col-8">{{order.carDate}}购入</span>
                            <span class="col-4 mui-text-right">行驶里程</span>
                        </li>
                    </ul>
                </div>
            </div>
            <!--联系人-->
            <div class="slwy-panel orderContacts">
                <div class="panel-content">
                    <div class="panel-title">联系信息</div>
                    <ul class="mui-table-view">
                        <li class="mui-table-view-cell text3" >
                            <p class="col-6 text3">{{person.contactName}}</p>
                            <p class="col-6 mui-text-right">
                                <i class="mui-icon mui-icon-phone-filled text3"></i>
                                <span class="text3">{{person.contactPhone}}</span>
                            </p>
                        </li>
                        <li class="mui-table-view-cell text3" >
                            <p class="col-12 text3">{{person.contactAdress}}</p>
                        </li>
                    </ul>
                </div>
            </div>
            <!--技师-->
            <div class="slwy-panel orderContacts" v-show="order.jsName!=null||order.jsName!=''">
                <div class="panel-content">
                    <div class="panel-title">技师</div>
                    <ul class="mui-table-view">
                        <li  class="mui-table-view-cell text3"  >
                            <p class="col-6 text3">{{order.jsName}}</p>
                            <p class="col-6  mui-text-right">
                                <i class="mui-icon mui-icon-phone-filled text3"></i>
                                <span class="text3">{{order.jsPhone}}</span>
                            </p>
                        </li>
                        
                    </ul>
                </div>
            </div>
            <!--维修信息-->
            <div class="slwy-panel repairInfo">
                <div class="panel-content">
                    <div class="panel-title">商品及服务</div>
                    <ul class="mui-table-view " id="settlementList"> 
                        <li v-for="(index,item) in allList" class="mui-table-view-cell text3" v-show="item.show">
                            <span class="col-8  text3">{{item.xmName}}</span>
                            <div class="col-4 mui-text-right price-size" v-show="item.pjPrice!=null">￥{{item.pjPrice + item.xmprice}}</div>
                            <div class="col-4 mui-text-right price-size" v-show="item.pjPrice==null">￥{{item.xmprice}}</div>
                            <span class="col-8  text3" v-if="item.isZd==1"> {{item.pjName}}</span>
                            <span class="col-8  text3" v-if="item.isZd==0"> 用户自带</span>
                            <div class="col-4 mui-text-right  text3" v-if="item.isZd==1&&item.pjName!=null">x{{item.pjNum}}</div>
                        </li>     
                        <li class="mui-table-view-cell  " v-show="isAll">
                            <span class="col-12 mui-text-center"><a href="javascript:;" @click="showall" v-show="isShowall" id="showall">展开查看全部项目</a></span>
                            <span class="col-12 mui-text-center"><a href="javascript:;" @click="hidemore" v-show="isHidemore" id="hidemore">收起项目</a></span>
                        </li>
                        <li class="mui-table-view-cell text3 dis-bli">
                            <div class="col-12 mui-text-right  text3 ">应付：<span class=" price-size">￥{{order.orderSum}}</span></div>
                        </li>
                    </ul>
                </div>
            </div>
            <!--订单信息-->
            <div class="slwy-panel repairInfo">
                <div class="panel-content">
                    <ul class="mui-table-view no-border">
                        <li class="mui-table-view-cell text3">
                            <span>订单编号：</span>
                            <span>{{order.orderCode}}</span>
                        </li>
                        <li class="mui-table-view-cell text3">
                            <span>生成时间：</span>
                            <span>{{order.createTime}}</span>
                        </li>
                        <li v-if=" order.pdTime!= null" class="mui-table-view-cell text3">
                            <span>派单时间：</span>
                            <span>{{order.pdTime}}</span>
                        </li>
                        <li v-if="order.startTime!= null" class="mui-table-view-cell text3">
                            <span>维养开始：</span>
                            <span>{{order.startTime}}</span>
                        </li>
                        <li v-if=" order.endTime!= null" class="mui-table-view-cell text3">
                            <span>维养结束：</span>
                            <span>{{order.endTime}}</span>
                        </li>
                        <li v-if="order.payTime!= null" class="mui-table-view-cell text3">
                            <span>支付时间：</span>
                            <span>{{order.payTime}}</span>
                        </li>
                        <li v-if="order.orderStatus > 39" class="mui-table-view-cell ">
                            <span class="col-12 mui-text-center"><a href="javascript:;" @click="look(order.orderCode)">查看检测报告</a></span>    
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!--确认服务按钮-->
    <div class="fixedOperate" v-if="order.orderStatus < 3">
        <button class="mui-btn mui-btn-primary" v-link="{name:'maintenanceOrderCancel',params:{id:order.orderCode}}">取消订单</button>
    </div>
    <div class="fixedOperate" v-if="order.orderStatus==40">
        <button class="mui-btn mui-btn-primary" @click="doComment(order.orderId,order.jsName)">服务评价</button>
    </div>
</template>
<style>
    /*订单状态*/
    .orderDetail .unconfirmed{color: #ff6600; font-weight: bold;}
    .addressWrap,.telWrap{display: -webkit-box; display: -ms-flexbox; -webkit-box-align: center; -moz-box-align: center; -ms-box-align: center;}
    .addressWrap .addressRight , .telWrap .telRight{width: 1.2rem; text-align: center; border-left: 1px solid #DDD8CE; color: #06c1ae;}
    .addressWrap .addressRight p{overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
    .no-border .mui-table-view-cell:after{background-color:#fff!important;}
    .dis-bli{display: block!important;}
    .price-size{color: #ff8317!important ;font-size: .28rem !important;}
</style>
<script type="text/ecmascript-6">
        import '../../fonts/mui.css';
        import Page from '../../base/Page';
        import { API } from '../../config/constants';
        import wechat from '../../libs/wechat'
        export default new Page({
            data(){
                return{
                    order:{},
                    mgClass:true,
                    allList:[],
                    person:[],
                    isAll:false,
                    isShowall:true,
                    isHidemore:false
                }    
            },
            methods:{
                doComment:function (id,commentObject) {
                    var data = {objectId:id,commentObject:commentObject,commentType:3};
                    var param = JSON.stringify(data);
                    this.$route.router.go('/maintenanceComment/create?param=' + encodeURI(param));
                },
                handleClickNavi:function(){
                    if (!this.order.enterpriseGps) {
                        alert('无地址')
                    } else {
                        var coor = this.order.enterpriseGps.split(',');
                        wechat.openLocation({
                            latitude: parseFloat(coor[0]),
                            longitude: parseFloat(coor[1]),
                            scale: 15,
                            name: this.order.enterpriseName,
                            address: this.order.enterpriseAddress
                        });
                    }
                },
                showall:function(){ 
                    var alist=document.getElementById("settlementList").getElementsByTagName("li");
                    var allnum=alist.length;
                    if(allnum>4){
                         for(var i=0;i<alist.length;i++){
                            if(i>2&&i<alist.length-2){
                                alist[i].style.display="block";
                                }
                             };
                    document.getElementById("showall").style.display="none";  
                    document.getElementById("hidemore").style.display="block";       
                    }
                 },
                hidemore:function(){ 
                    var alist=document.getElementById("settlementList").getElementsByTagName("li");
                    var allnum=alist.length;
                    if(allnum>4){
                         for(var i=0;i<alist.length;i++){
                            if(i>2&&i<alist.length-2){
                                alist[i].style.display="none";
                                }
                             };
                    document.getElementById("hidemore").style.display="none";  
                    document.getElementById("showall").style.display="block";     
                    }
                },
                look:function (id) {
                    this.$route.router.go('/maintenance/detail/' + id );
                }
            },
            ready () {
                var that=this;
                this.getJSON(API.GET_CONTACT_DETAIL, {}, res => {
                    
                    this.person = res.resultData;    
                });
                this.getJSON(API.GET_MAINTANCE_DETAIL, {orderCode:this.$route.params.id}, res => {
                    console.log(res);
                    this.order = res.resultData;
                    console.log(this.order);

                    res.resultData.tcList[0].tcxmList.forEach(function(item){
                      that.allList.push(item)
                    });
                     
                    res.resultData.xmList.forEach(function(item){
                     that.allList.push(item)
                    });
                    that.allList.forEach(function(item,index){
                        if(index>2){
                            item.show=false;
                        }else{
                            item.show=true;
                        }
                    });
                    if(that.allList.length>3){
                        that.isAll=true;
                    }
                    //通过订单状态判定，动态给mui-content添加mgb2
                    if(this.order.orderStatus==3||this.order.orderStatus==5||this.order.orderStatus==6||this.order.orderStatus==41){
                        this.mgClass=false;
                    }else{
                        this.mgClass=true;
                    }
                     
                });
                mui('.mui-scroll-wrapper').scroll({
                    indicators: true, //是否显示滚动条
                    deceleration : 0.0005,
                });
                         
            },
            components:{
            }
    });

</script>
